<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单信息</title>
    <script src="../js/order.js" type="text/javascript"></script>
    <style>
        body{
           width: 960px;
           margin: 0px auto;
           background: url(../img/bg_sea1.jpg) #F4F9FF no-repeat center top;
        }
        ul{
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style: none;
        }
        h2{
            width: 99%;
            margin: 0px;
            padding:5px 0 0 10px;
            font-size: 20px;
            color: white;
            background-color: #7088AD;
        }
        .singleLine div {
            display: flex;
            flex-direction: row;
        }
        .singleLine span {
            display: inline-block;
            font-size: 15px;
            color: #333333;
            background-color:#E6E6E6;
            text-align: right;
            padding-right: 5px;
            flex: 1;
        }
        .singleLine input {
            display: inline-block;
            height: 20px;
            background-color:#FAFAFA;
            text-align: left;
            padding-left: 2px;
            flex:2;
        }

        input#tbxNum, input#tbxPrice, input#tbxMoney{
            text-align: right;
        }
        div#buttonDiv{
            width: 100%;
            text-align: right;
        }
        input[type="button"],input[type="submit"]{
            width: 68px;
            height: 20px;
            cursor: hand;
            border: none;
            font-family: 宋体;
            font-size: 15px;
        }
        div#infoTable{
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        div#infoTable table{
            width: 100%;
            background-color: white;
            cellpadding:1;            /*单元格边距*/
            cellspacing:1;            /*单元格间距*/
            font-size: 15px;
            text-align: center;
        }
        div#infoTable table th{
            width: 8%;
            height: 22px;
            background-color:#7088AD;
            color:#FFFFFF;
        }
        div#infoTable table tr{
            height: 30px;
        }
        div#infoTable table tr:nth-child(odd){   /*table的奇数行*/
            background-color: #E6E6E6;
            color: #333333;
        }
        div#infoTable table tr:nth-child(even){   /*table的偶数行*/
            background-color: #FAFAFA;
            color: black;
        }
        div#infoTable table tr:nth-child(1){      /*table的第一行*/
            background-color: #7088AD;
            color: #FFFFFF;
        }
        </style>
</head>
<body onload="window_onload()">
<section>
    <header>
        <h2>商品订单明细</h2>
    </header>
    <form id="form1">
        <ul>
            <li  class="singleLine">
                <div>
                    <span>订&nbsp;单&nbsp;代号</span><input type="text" id="orderID" maxlength="10" placeholder="请准确输入" autofocus required />
                    <span>订&nbsp;单&nbsp;日期</span> <input type="date" id="orderDate"  required />
                    <span>商&nbsp;品&nbsp;名称</span> <input type="text" id="lineName" />
                </div>
            </li>

            <li  class="singleLine">
                <div>
                    <span>代&nbsp;理&nbsp;商家</span><input type="text" id="employeeName" maxlength="20">
                    <span>数&nbsp;&nbsp;&nbsp;&nbsp;量</span><input type="number" id="num"   max="99" value="0"
                                                                    placeholder="请输入一个整数" required onblur="num_onblur()">

                    <span>单&nbsp;&nbsp;&nbsp;&nbsp;价</span><input type="text" id="price"  value="0"
                    placeholder="请输入一个有效单价" required onblur="price_onblur()">

                </div>
            </li>

            <li  class="singleLine">
                <div>
                    <span>金&nbsp;&nbsp;&nbsp;&nbsp;额</span> <input type="text" id="money" readonly value="0">
                    <span>客户联系人</span> <input type="text" id="theCustomer"  maxlength="20">
                    <span>客户联系电话</span> <input type="text" id="theMobile"  maxlength="20" placeholder="请输入手机号码" >
                </div>
            </li>
        </ul>
        <div id="buttonDiv">
            <input type="button" id="btnNew" value="清除"
                   onclick="btnNew_onclick();"/>
            <input type="submit" id="btnAdd" value="追加"
                   formaction="javascript:btnAdd_onclick();"/>
            <input type="submit"id="btnUpdate" value="修改"
                  disabled formaction="javascript:btnUpdate_onclick();"/>
            <!--disabled设置按钮不可使用，当满足条件时可用-->
            <input type="button" id="btnDelete" value="删除"
                   disabled onclick="btnDelete_onclick();"/>
            <input type="button" name="btnShow" id="btnShow" value="显示数据"
                   onclick="showAllData(false);"/>
        </div>
    </form>
</section>
<section>
    <header>
        <h2>商品订单汇总</h2>
    </header>
    <div id="infoTable">
        <table id="datatable">
            <tr>
                <th>订单代号</th>   <th>订单日期</th>   <th>商品名称</th>
                <th>代理商家</th>        <th>数量</th>         <th>单价</th>
                <th>金额</th>         <th>客户联系人</th>        <th>客户联系电话</th>
            </tr>
        </table>
    </div>
</section>
</body>
</html>